<template>
	<view class="mainCon">
		<view class="tabHead">
			<view class="tabItem" :class="current==index?'active':''" v-for="(item,index) in tabList"
				@click="tapChange(index)">
				{{item}}
			</view>
		</view>
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="leftCon">
							<view class="labelTag">
								提单号：
							</view>
							{{item.bill_no}}
						</view>
						<view class="status1">
							<template v-if="item.work_way=='FOEI'">
								提重
							</template>
							<template v-if="item.work_way=='EOFI'">
								提空
							</template>
							<template v-if="item.work_way=='FONI'">
								提重
							</template>
							<template v-if="item.work_way=='EOEI'">
								提空
							</template>
							<template v-if="item.work_way=='EONI'">
								提空
							</template>
							<template v-if="item.work_way=='EOTC'">
								提空
							</template>
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							有效期 : {{item.DEADLINE}}
						</view>
						<view class="status2">
							<template v-if="current==0">
								待办单
							</template>
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelTag">
							箱型尺寸：
						</view>
						<view style="display: flex;align-items: center;">
							<view class="infoCon">
								{{item.xc}}
							</view>

							<view class="infoCon" style="margin: 0 20rpx;">
								{{item.xx}}
							</view>

							<view class="infoCon">
								{{item.xh}}
							</view>
						</view>
					</view>
					
					<view class="infoCell">
						<view class="labelName">
							委托号
						</view>
						<view class="infoCon">
							{{item.CONTRACT_NO}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							车牌号
						</view>
						<view class="infoCon">
							{{item.carcode}}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							船名/航次
						</view>
						<view class="infoCon">
							{{item.shipname}} / {{item.voyage}}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							业务属性
						</view>
						<view class="infoCon">
							{{item.trade_id=='1'?'外贸':'内贸'}}
						</view>
					</view>
					<view class="infoCell" v-if="current==2">
						<view class="labelName">
							箱位
						</view>
						<view class="infoCon">
							{{item.CNTRPLAC}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							箱主
						</view>
						<view class="infoCon">
							{{item.XGS}}
						</view>
					</view>
					<view class="infoCell" v-if="current==3">
						<view class="labelName">
							重量
						</view>
						<view class="infoCon">
							{{item.ZXZL === undefined ? '' : item.ZXZL}}
						</view>
					</view>
					
					<!-- 	<view class="infoCell">
						<view class="labelName">
							提箱截止日期
						</view>
						<view class="infoCon">
							内贸
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							EIR
						</view>
						<view class="infoCon">
							内贸
						</view>
					</view> -->
				</view>
				<view class="bottomActions"> 
					<view class="confirm" @click="tapCancel(item)" v-if="current==1">
						取消预约
					</view>
					<view class="confirm" @click="tapBandan(item)" v-if="current==0">
						预约办单
					</view>
					<!-- <view class="confirm" @click="tapShowMap(item)" v-if="current==2">
						查看地图位置
					</view> -->
					<!-- <view class="confirm" @click="tapShowRoadTransportOrder(item)" v-if="current==3">
						道路运输单
					</view> -->
				</view>
			</view>
		</view>
		
		<view v-if="current==1&&orderList.length>0" class="cxtxSubmit">
			<u-button :custom-style="customStyle" type="primary" @click="cxtxSubmit">拆箱提箱</u-button>
		</view>

		<view style="margin-top: 100rpx;" v-if="orderList.length==0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
					width: '240rpx'
				},
				tabList: ["待办单", "已预约", "作业中", "已完成"],
				current: 0,
				orderList: [],
				tel: "", 
				flag: false,
				E_F_ID:'',
				// baseUrl: this.$store.state.baseUrl,
				baseUrl: 'http://localhost:9051',
				// 用于get路径传参拼接的固定地址
				urlPath: this.$httpApi.driverUrl
			};
		},
		onLoad() {
			//uni.getStorageSync("userInfo").mobile
			this.tel = uni.getStorageSync("userInfo").mobile
			this.getState1()
		}, 
		methods: {
			cxtxSubmit() {
				console.log('orderList', this.orderList)
				uni.request({
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/cxtx',
					method: 'post',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: {
						list: this.orderList
					},
					success: (res) => {
						console.log(res)
						this.getState2()
						uni.showToast({
							title: '拆箱提箱成功',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			// TX1重构接口
			async getTX1(){
				// 1.接口地址数据拼接
				const path = this.urlPath.TX1.path + this.tel
				const method = this.urlPath.TX1.method
				const TX1 = {
					path: path,
					method: method
				}
				
				// 2.请求接口
				const res = await this.$http.request(TX1) 
				this.orderList = res.rows
				console.log('this is TX1', res)
			},
			
			// TX2重构接口
			async getTX2(){
				const path = this.$httpApi.driverUrl.TX2.path + this.tel
				const method = this.$httpApi.driverUrl.TX2.method
				const TX2 = {
					path: path,
					method: method
				}
				
				const res = await this.$http.request(TX2)
				this.orderList = res.rows
				console.log('this is TX2', res)
			},
			
			// TX3重构接口
			async getTX3(){
				const path = this.$httpApi.driverUrl.TX3.path + this.tel
				const method = this.$httpApi.driverUrl.TX3.method
				const TX3 = {
					path: path,
					method: method
				}
				
				const res = await this.$http.request(TX3)
				this.orderList = res.rows
				console.log('this is TX3', res)
			},
			
			// TX4重构接口
			async getTX4(){
				const path = this.$httpApi.driverUrl.TX4.path + this.tel
				const method = this.$httpApi.driverUrl.TX4.method
				const TX4 = {
					path: path,
					method: method
				}
				
				const res = await this.$http.request(TX4)
				this.orderList = res.rows
				console.log('this is TX4', res)
			},
			
			tapChange(index) {
				this.current = index
				if (index == 0) {
					this.getState1()
				} 
				if (index == 1) {
					this.getState2()
				}
				if (index == 2) {
					this.getState3()
				}
				if (index == 3) {
					this.getState4()
				}
			},
			
			getState1() {
				uni.showLoading({
					title: '加载中...'
				})
				// this.getTX1()
				uni.request({
					 // url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/KCECFpTkuKWo2SC?tel=' + this.tel,
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/TX1/' + this.tel,
					method: "get",
					success: (res) => {
						// console.log(res.data);
						this.orderList = res.data.rows
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
			},
			
			getState2() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					 // url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/KCECFpTkuKWo2SC?tel=' + this.tel,
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/TX2/' + this.tel,
					method: "get",
					success: (res) => {
						// console.log(res.data);
						this.orderList = res.data.rows
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
				// this.getTX2()
			},
			getState3() {
				uni.showLoading({
					title: '加载中...'
				})
				// this.getTX3()
				uni.request({
					 // url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/KCECFpTkuKWo2SC?tel=' + this.tel,
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/TX3/' + this.tel,
					method: "get",
					success: (res) => {
						// console.log(res.data);
						this.orderList = res.data.rows
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
			},
			getState4() {
				uni.showLoading({
					title: '加载中...'
				})
				// this.getTX4()
				uni.request({
					 // url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/KCECFpTkuKWo2SC?tel=' + this.tel,
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/TX4/' + this.tel,
					method: "get",
					success: (res) => {
						console.log(res.data);
						this.orderList = res.data.rows
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '接口超时',
							icon: 'none'
						})
					}
				})
			},
			tapBandan(item) {
				// uni.request({
				// 	// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/bQ69FXKGbG7BqI7?id=' + item.ID,
				// 	url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/getTruckId/' + item.id,
				// 	method: "get",
				// 	success: (res0) => {
				// 		if (res0.data.total>0) {
							 
				// 		}
				// 	}
				// })
				// let that = this;
				// if (that.flag) return;
				let that = this;
				that.flag = true
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/eBv5hZgZ6DPpc5s?carcode=' + item.CARCODE +
					// 	'&id=' + item.id,
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/yzyy/' + item.carcode + 
						'/' + item.id,
					method: "get",
					success: (res) => {
						let totalXc = 0
						if(res.data.rows.length > 0) {
							res.data.rows.map(val => {
							 	totalXc = Number(val.xc) + Number(item.xc)
								return totalXc
							})
						}
						if (totalXc > 40) {
							that.flag = false
							uni.showToast({
								title: '预约箱尺数已超上限,不可预约',
								icon: 'none'
							})
						}	
						else { 
							if(item.work_way=='FOEI' || item.work_way=='FONI'){
								this.E_F_ID='F'
							}
							if(item.work_way=='EOFI' || item.work_way=='EONI' || item.work_way=='EOEI'){
								this.E_F_ID='E'
							}
							if (item.xh == ''|| item.xh ==null) {
								item.xh = '';
							}
							uni.request({
								// url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/txyy&E_OR_F='+this.E_F_ID+'&id=' +
								// 	item.id + '&xh=' + item.xh + '&mark=0',
								url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/txyy/'+this.E_F_ID+'/' +
									item.id + '/' + item.xh + '/0',
								method: "get",
								success: (res2) => {
									that.flag = false
									if (res2.data.msg == '操作成功') {
										uni.showToast({
											title: '预约成功',
											icon: 'success',
											duration: 2000
										})
										setTimeout(() => {
											that.getState1()
										}, 1000)
									}
								}
							})  
						} 
					}
				})
			},
			tapCancel(item) {
				//console.log(item)
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/iMLNJTySrHqJaae?id=' + item.ID,
					url: 'https://tos.flatgroup.com.cn:9000/flt-api/zlkj/wechat/qxyy/' + item.id,
					method: "get",
					success: (res2) => {
						if (res2.data.msg == '操作成功') {
							uni.showToast({
								title: '取消成功',
								icon: 'success',
								duration: 2000
							})

							setTimeout(() => {
								this.getState2()
							}, 1000)
						}
					}
				})
			},
			tapShowMap(item) { 
				console.log(item)
				 uni.navigateTo({
				 	url: './cntr_plac_map?positionResult='+item.CNTRPLAC
				 })
			},
			tapShowRoadTransportOrder(item){
				 
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}
	.cxtxSubmit {
		margin: 20rpx;
		float: right;
	}
	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;

			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #C1C3C2;
							font-size: 28rpx;
							margin-right: 15rpx;
							width: 175rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
